.shinylive-example-selector {
  padding: 3px 3px 3px 8px;
  font-family: var(--font-face);
  /* Each level of hierarchy will indent by a set amount (via padding) */
  --indent: 8px;
  --divider-color: #f1f1f1;
}

.shinylive-example-selector > .categories {
  height: 100%;
  overflow-y: auto;
  padding: var(--indent);
}

.shinylive-example-selector > .categories .category-title {
  color: var(--colors-blue, blue);
  margin-top: calc(var(--indent) * 2);
}

.shinylive-example-selector .example {
  --v-pad: calc(var(--indent));
  --h-pad: calc(var(--indent) * 2);
  /* margin: 0.5rem 0; */
  padding-left: var(--h-pad);
  padding-top: var(--v-pad);
  padding-bottom: var(--v-pad);
  cursor: default;
  position: relative;
  --sidebar-color: var(--colors-grey);
  --sidebar-indent: calc(var(--indent) / 1.3);
  --sidebar-w: 1px;
}

/* Undo the default link styles */
.shinylive-example-selector .example > a {
  text-decoration: unset;
  color: unset;
  cursor: unset;
}

.shinylive-example-selector .example:hover:not(.selected) {
  cursor: pointer;
}

/* Selection is indicated by a thicker sidebar. Bar grows when hovered to indicate that clicking will select */
.shinylive-example-selector .example.selected,
.shinylive-example-selector .example:hover {
  --sidebar-w: 4px;
}

/* The selected example's sidebar is blue */
.shinylive-example-selector .example.selected {
  --sidebar-color: var(--colors-blue, blue);
}

/* The sidebar is defined by a before psuedoelement */
.shinylive-example-selector .example:before {
  content: "";
  position: absolute;
  height: 70%;
  top: 15%;
  width: var(--sidebar-w);
  border-radius: var(--button-roundness, 5px);
  left: calc(var(--sidebar-indent) - var(--sidebar-w) - 1px);
  background-color: var(--sidebar-color);
}

.shinylive-example-selector .example .title {
  font-weight: 500;
}

.shinylive-example-selector .example .about {
  color: var(--colors-grey, grey);
  font-size: small;
  font-style: italic;
  font-weight: 400;
}

.shinylive-example-selector > .categories > section > .divider {
  width: 100%;
  height: 1px;
  background-color: var(--divider-color);
}
